<template>
	<view class="bg userLayout">
		<view class="fill" :style="{height: getFillHeight() + 'px'}"></view>
		<view class="userInfo">
			<view class="avatar" @click.capture="toUserInfo">
				<image v-if="hasLogin&&userInfo.avatar_file&&userInfo.avatar_file.url" :src="cloudIdToUrl(store.userInfo.avatar_file.url)" mode="aspectFill" class="img"></image>
				<image v-else src="/static/images/xxmLogo.png"  mode="aspectFill" class="img"></image>
			</view>
			<view v-if="!hasLogin" class="nickname">未登录</view>
			<view v-else class="nickname">昵称：{{userInfo.nickname}}</view>
		</view>
		<view class="section">
			<view class="list">
				<userinfo-item icon="heart-filled" title="我的收藏" :number="myFavorites?.total" @click="goImages('myfavorites')"></userinfo-item>
				<userinfo-item icon="star-filled" title="我的评分" :number="myRatings?.total"  @click="goImages('myratings')"></userinfo-item>
				<userinfo-item icon="download-filled" title="我的下载" :number="myDownloads?.total" @click="goImages('mydownloads')"></userinfo-item>

				<userinfo-item icon="chatboxes-filled" title="联系客服" nonNumber @click="onCall"></userinfo-item>
			</view>
		</view>
		<view class="section">
			<view class="list">
				<userinfo-item icon="notification-filled" title="订阅更新" nonNumber></userinfo-item>
				<userinfo-item icon="flag-filled" title="常见问题" nonNumber></userinfo-item>
				<userinfo-item icon="gear-filled" title="设置" @click="toSetting" nonNumber></userinfo-item>
			</view>
		</view>
	</view>
</template>

<script setup>
	
	import {ref} from 'vue'
	import { onPullDownRefresh } from "@dcloudio/uni-app"
	import {getFillHeight} from '@/utils/system.js'
	import {cloudIdToUrl} from '@/utils/common.js'
	import {isLoggedIn} from '@/utils/user.js'
	import {store,mutations} from '@/uni_modules/uni-id-pages/common/store.js'
	import { apiGetMyDownloads, apiGetMyRatings, apiGetMyFavorites} from '@/api/index.js'
	const userInfo = ref(null)
	const hasLogin = ref(false)
	const myDownloads = ref(null)
	const myRatings = ref(null)
	const myFavorites = ref(null)
	
	const loadUserData = async () => {
		hasLogin.value = await isLoggedIn({checkToken:true})
		if(hasLogin.value) {
			userInfo.value = store.userInfo
			const promises = [
				apiGetMyDownloads({onlyCounts:true}),
				apiGetMyRatings({onlyCounts:true}),
				apiGetMyFavorites({onlyCounts:true})
			];
			// results[i].status  results[i].reason
			const results = await Promise.allSettled(promises);
			if(results[0].status == 'fulfilled') myDownloads.value = results[0].value
			if(results[1].status == 'fulfilled') myRatings.value = results[1].value
			if(results[2].status == 'fulfilled') myFavorites.value = results[2].value
		}
		// console.log('myDownloads=',myDownloads.value)
		// console.log('myRatings=',myRatings.value)
		// console.log('myFavorites=',myFavorites.value)
	}
	
	loadUserData()
	
	const onCall = () => {
		uni.makePhoneCall({
			phoneNumber: '114' //仅为示例
		});
	}
	
	const toUserInfo = () => {
		uni.navigateTo({
			url: '/uni_modules/uni-id-pages/pages/userinfo/userinfo'
		})
	}
	
	const toSetting = () 	=> {
		uni.navigateTo({
			url: '/pages/ucenter/settings/settings'
		})
	}
	
	const goImages = (type) => {
		if(hasLogin.value) {
			uni.navigateTo({
				url: '/pages/images/images?type='+type
			})
		} else {
			uni.showToast({
				icon:'none',
				title:'请点击头像进行登录'
			})
		}
	}
	
	onPullDownRefresh(() => {
		loadUserData()
		uni.stopPullDownRefresh()
	})
</script>

<style lang="scss" scoped>
.bg{
	background: 
	linear-gradient(to bottom, rgba(0,0,0,0,), #fff 500rpx),
	linear-gradient(to right, #beecd8 20%, #F4E2D8);
	height: 80vh;
}
.userLayout{
	box-sizing: border-box;
	width: 100%;
	.fill{
	}
	.userInfo{
		height: 350rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		.avatar{
			width: 160rpx;
			height: 160rpx;
			border-radius: 50%;
			overflow: hidden;
			.img{
				width: 100%;
				height: 100%;
			}
		}
		.nickname{
			font-size: 28rpx;
			color:$text-color-mian;
			padding: 20rpx 0;
		}
		.address{
			font-size: 28rpx;
			color:$text-color-sub;
		}
	}
	.section{
		padding: 30rpx;
		background: #fff;
		border-radius: 10rpx;
		overflow: hidden;
		.list{
			border: 1px solid $border-color;
			border-radius: 10rpx;
			box-shadow: 0 0 20rpx rgba(0,0,0,0.05);
			padding: 0 20rpx;
		}
	}
}
</style>
